<template>
  <view class="evaluate">
    <u-sticky bgColor="#fff">
      <view class="evaluate-tab">
        <u-tabs
          :list="tabs"
          @click="tabClick"
          :scrollable="false"
          lineColor="transparent"
          :activeStyle="{
            color: '#C94117',
            fontWeight: 'bold',
            transform: 'scale(1.05)',
          }"
          :inactiveStyle="{
            color: '#666666',
            transform: 'scale(1)',
          }"
        >
        </u-tabs>
      </view>
    </u-sticky>

    <!-- <view class="evaluate-list"> -->
    <view class="evaluate-list">
      <load-list :localData="evaluateList">
        <template v-slot="{ list }">
          <view
            class="evaluate-item"
            v-for="(item, index) of list"
            :key="index"
          >
            <view class="item-info flex flex-item-center">
              <!-- <image
                v-if="item.evaluate_avatar[0].url"
                class="flex-shrink-0"
                :src="$photo(item.evaluate_avatar[0].url)"
                mode=""
              /> -->
              <view class="img flex-shrink-0">
                <u-avatar
                  size="48rpx"
                  :src="$photo(item.evaluate_avatar[0].url)"
                />
              </view>
              <text>{{ item.evaluate_name }}</text>
              <u-rate
                :count="5"
                size="28rpx"
                :value="item.score"
                minCount="0"
                readonly
                active-color="#FFCD2A"
                inactive-color="#b2b2b2"
              ></u-rate>
            </view>
            <view class="item-content">
              {{ item.server_content || "用户未及时作出评价，默认好评。" }}
            </view>
            <view class="item-date">{{
              $u.timeFormat(item.creatorTime, "yyyy.mm.dd hh:MM:ss")
            }}</view>
          </view>
        </template>
      </load-list>
    </view>
    <!-- <view
        class="evaluate-item"
        v-for="(item, index) of evaluateList"
        :key="index"
      >
        <view class="item-info flex flex-item-center">
          <image
            v-if="item.evaluate_avatar[0].url"
            class="flex-shrink-0"
            :src="$photo(item.evaluate_avatar[0].url)"
            mode=""
          />
          <text>{{ item.evaluate_name }}</text>
          <u-rate
            :count="5"
            :value="item.score"
            minCount="0"
            size="24"
            readonly
            active-color="#FFCD2A"
            inactive-color="#b2b2b2"
          ></u-rate>
        </view>
        <view class="item-content">
          {{ item.server_content || "用户未及时作出评价，默认好评。" }}
        </view>
        <view class="item-date">{{
          $u.timeFormat(item.creatorTime, "yyyy.mm.dd hh:MM:ss")
        }}</view>
      </view> -->
    <!-- </view> -->
  </view>
</template>

<script>
import { getModelList } from "@/api";
import { getSearchFilter } from "@/common/function";
import loadList from "../../../components/load-list/load-list.vue";
export default {
  components: { loadList },
  data() {
    return {
      tabs: [
        {
          name: "全部",
        },
        {
          name: "好评",
        },
        {
          name: "一般",
        },
        {
          name: "差评",
        },
      ],
      value: 3,
      evaluateListData: [],
      evaluateList: [],
    };
  },
  onLoad({ projectId }) {
    this.getCommentData(projectId);
  },
  methods: {
    tabClick(e) {
      let arr = [...this.tabs].map((item) => {
        if (item.badge) delete item.badge;
        return item;
      });

      switch (e.index) {
        case 0:
          this.evaluateList = this.evaluateListData;
          break;

        case 1:
          this.evaluateList = this.evaluateListData.filter(
            (item) => item.score >= 4
          );
          break;

        case 2:
          this.evaluateList = this.evaluateListData.filter(
            (item) => item.score >= 2 && item.score < 4
          );
          break;

        default:
          this.evaluateList = this.evaluateListData.filter(
            (item) => item.score < 2
          );
          break;
      }

      arr[e.index].badge = {
        value: this.evaluateList.length,
        bgColor: "#C94117",
        inverted: true,
      };
      this.tabs = arr;
    },
    // 通过项目id获取评论
    async getCommentData(id) {
      let initTabs = [...this.tabs];
      let filter = {
        currentPage: 1,
        pageSize: -1,
        filter: getSearchFilter({ project_id: id }),
      };
      const { data } = await getModelList("65b856b55efd5153ff55cd80", filter);
      this.evaluateListData = data?.list;
      this.evaluateList = this.evaluateListData;
      initTabs[0].badge = {
        value: this.evaluateList.length,
        bgColor: "#C94117",
        inverted: true,
      };
      this.tabs = initTabs;
    },
  },
};
</script>

<style lang="scss" scoped>
.evaluate {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
  padding-bottom: constant(safe-area-inset-bottom) !important;
  padding-bottom: env(safe-area-inset-bottom) !important;

  .evaluate-item {
    padding: 20rpx 18rpx 30rpx 18rpx;
    border-bottom: 1px solid #e3e3e3;
    box-sizing: border-box;

    &:last-of-type {
      border-bottom: none;
    }

    &:first-of-type {
      padding-top: 30rpx;
    }

    .item-info {
      margin-bottom: 20rpx;

      .img {
        width: 48rpx;
        height: 48rpx;
        margin-right: 20rpx;
        border-radius: 50%;
      }

      > text {
        font-size: 28rpx;
        font-weight: bold;
        color: #333333;
        margin-right: 42rpx;
      }
    }

    .item-content {
      font-size: 26rpx;
      color: #666666;
      padding-left: 50rpx;
      margin-bottom: 12rpx;
    }

    .item-date {
      font-size: 24rpx;
      color: #999999;
      margin-left: 50rpx;
    }
  }
  .evaluate-list {
    height: calc(100vh - 100rpx - 40rpx);
  }
}

::v-deep .u-tabs__wrapper {
  border-bottom: 1px solid #e3e3e3;
  box-shadow: 0px 8rpx 6rpx 1px rgba(178, 178, 178, 0.16);
}
</style>
